<script setup lang="ts">
import { ref } from 'vue';
import Taro from '@tarojs/taro';
import { wxLogout } from '@/service';
import { useAuthStore } from '@/store';
import { getRequestUrl, handleExpireToken, showErrorMsg } from '@/service/request/helpers';

const authStore = useAuthStore();
const userInfo = ref<Auth.UserInfo>(authStore.getUserInfo());
const showLogoutDialog = ref<boolean>(false);

const onLogout = () => {
  showLogoutDialog.value = true;
};

const onLogoutConfirm = () => {
  Taro.showLoading({ title: '正在退出...' });
  wxLogout(userInfo.value.id)
    .then(() => {
      handleExpireToken();
      Taro.hideLoading();
    })
    .catch((err: Service.RequestError) => {
      Taro.hideLoading();
      showErrorMsg(err.message);
    });
};

const onCancel = () => {
  showLogoutDialog.value = false;
};

const toAbout = () => {
  Taro.navigateTo({
    url: `/package/about/index`
  });
};
const toSuggestion = () => {
  Taro.navigateTo({
    url: `/package/suggestion/index`
  });
};

const toFamily = () => {
  Taro.navigateTo({
    url: `/package/family/index`
  });
};

const onUserClick = () => {
  if (userInfo.value.id) {
    Taro.navigateTo({
      url: `/package/user/index`
    });
  } else {
    handleExpireToken();
  }
};
</script>
<template>
  <basic-layout show-tab-bar>
    <custom-nav-bar />
    <div class="w-375px text-30px text-primary">
      <!--用户信息-->
      <nut-cell-group class="m-20px">
        <nut-cell desc-text-align="center" @click="onUserClick">
          <template #icon>
            <nut-avatar size="large">
              <template #default>
                <span v-if="!userInfo.id" class="color-#999">点击登录</span>
                <img
                  v-else-if="userInfo.avatar"
                  alt=""
                  :src="
                    userInfo.avatar.startsWith('http') ? userInfo.avatar : getRequestUrl('/admin' + userInfo.avatar)
                  "
                />
                <span v-else class="text-20px font-bold">{{ userInfo.name.substring(0, 1) }}</span>
              </template>
            </nut-avatar>
          </template>
          <template #title>
            <span class="pl-16px text-14px font-bold">{{ userInfo.name }}</span>
            <span class="pl-16px text-12px mt-18px">{{ userInfo.id ? `家庭ID：${userInfo.familyId}` : '' }}</span>
          </template>
        </nut-cell>
      </nut-cell-group>
      <!--cell区域-->
      <nut-cell-group class="m-20px">
        <nut-cell title="我的家庭" is-link @click="toFamily">
          <template #icon>
            <i class="i-local-secure" />
          </template>
        </nut-cell>
        <nut-cell title="关于产品" is-link @click="toAbout">
          <template #icon>
            <i class="i-local-order" />
          </template>
        </nut-cell>
        <nut-cell title="意见反馈" is-link @click="toSuggestion">
          <template #icon>
            <i class="i-local-service" />
          </template>
        </nut-cell>
      </nut-cell-group>
      <nut-cell-group class="m-20px">
        <nut-cell title="退出登录" is-link @click="onLogout">
          <template #icon>
            <i class="i-local-logout" />
          </template>
        </nut-cell>
      </nut-cell-group>
      <nut-dialog v-model:visible="showLogoutDialog" content="确定退出？" @cancel="onCancel" @ok="onLogoutConfirm" />
    </div>
  </basic-layout>
</template>

<style lang="scss"></style>
